<template>
	<view class="page">
		<view class="ul">
			<view class="li border_bottom dis aic jcsb">
				<view class="lable">
					头像
				</view>
				<view class="dis aic jcsb">
					<view class="aravat_box" @click="uploadImg">
						<image :src="userInfo.avatar" class="aravat"></image>
					</view>
					<image src="/static/icon/icon_right.png" class="right" mode="widthFix"></image>
				</view>
			</view>
			<view class="li border_bottom dis aic jcsb">
				<view class="lable">
					昵称
				</view>
				<view class="dis aic jcsb">
					<view class="nikeName">
						<u--input placeholder="请输入内容" border="none" inputAlign="right" v-model="userInfo.nickName"
							@confirm='Update()'></u--input>

					</view>
					<image src="/static/icon/icon_right.png" class="right" mode="widthFix"></image>
				</view>
			</view>
			<view class="li border_bottom dis aic jcsb" @click="show = true">
				<view class="lable">
					性别
				</view>
				<view class="dis aic jcsb">
					<view class="sex">
						{{userInfo.sex == 1 ? '男' : userInfo.sex == 2 ? '女' : '未知' }}
					</view>
					<image src="/static/icon/icon_right.png" class="right" mode="widthFix"></image>
				</view>
			</view>
			<view class="li  dis aic jcsb" @click="goSchool">
				<view class="lable">
					学校<text
						style="font-size: 0.7em;color: #333;">（学校仅可修改一次，当前剩余{{userInfo.schoolUpdateNum == 0 ? '1' : '0'}}次）</text>
				</view>
				<view class="dis aic jcsb">
					<view class="sex">
						{{userInfo.schoolName}}
					</view>
					<image src="/static/icon/icon_right.png" class="right" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @cancel='close' @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		getMemberInfo,
		memberUpdate
	} from '@/api.js'
	export default {
		data() {
			return {
				userInfo: {

				},
				show: false,
				columns: [
					['男', '女']
				],
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			close() {
				console.log('show');
				this.show = false
			},
			confirm(e) {
				console.log('e', e);
				this.userInfo.sex = e.value[0] == '男' ? 1 : 2
				this.close()
				this.Update()
			},
			init() {
				this.getUserInfo()
			},
			goSchool() {
				if (this.userInfo.schoolUpdateNum == 0) {
					uni.reLaunch({
						url: '/pages/login/chooseSchool'
					})
				}

			},
			async getUserInfo() {
				let res = await getMemberInfo()
				this.userInfo = res.result
				uni.setStorage({
					key: 'userInfo',
					data: JSON.stringify(res.result),
				});
				if (!this.userInfo.schoolId || this.userInfo.schoolId == '') {
					uni.reLaunch({
						url: '/pages/login/chooseSchool'
					})
				}
			},
			uploadImg() {
				var that = this

				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '加载中',
							mask: true,
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.cardAddVOS = []
						uni.uploadFile({
							url: 'https://xybl.appldkj.com/api/jeecg-boot/sys/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {},
							success: (uploadFileRes) => {
								uni.hideLoading()
								let msg = JSON.parse(uploadFileRes.data).message
								that.userInfo.avatar = msg
								that.Update()
							}
						});
					}
				});
			},
			async Update() {
				let res = await memberUpdate({
					sex: this.userInfo.sex,
					nickName: this.userInfo.nickName,
					avatar: this.userInfo.avatar
				})
				console.log('res', res);
				if (res.code == 200) {
					uni.showToast({
						title: "修改成功",
						icon: "none"
					})

				}
			},


		},
	}
</script>

<style lang="scss" scoped>
	.page {
		background: rgb(245, 245, 245);
		min-height: 100vh;
		width: 750rpx;

		box-sizing: border-box;

		.ul {
			padding: 0 30rpx;
			background: #fff;

			.border_bottom {
				border-bottom: 1rpx solid #DBDADA;
			}

			.li {
				margin: 10rpx 0;
				padding: 20rpx 0;


				.lable {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
				}

				.nikeName {
					font-family: DengXian, DengXian;
					font-weight: bold;
					font-size: 24rpx;
					color: #9B9B9B;
				}

				.sex {
					color: #000000;
				}

				.aravat_box {
					width: 110rpx;
					height: 110rpx;
					border-radius: 50% 50%;
					overflow: hidden;

					.aravat {
						width: 110rpx;
						height: 110rpx;
					}
				}

				.right {
					width: 20rpx;
					margin: 0 20rpx;
				}
			}

		}
	}
</style>